<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Two grids demo</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="demo.css"/>
  <style type="text/css">
    .with-lines { border: 1px dotted #777}
  </style>

  <script src="../dist/gridstack-all.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h1>Two grids demo</h1>
    <p>Two grids, one floating one not, showing drag&drop from sidebar and between grids.
    <br>New v10.2: use 'Esc' to cancel any move/resize. Use 'r' to rotate as you drag.</p>

    <div class="row">
      <div class="col-md-8">
        <!-- NOTE: add .grid-stack-item for acceptWidgets:true, but not needed for function which handles .sidebar-item (anything) -->
        <div class="sidebar">
          <!-- will size to match content. Also see sidebarContent -->
          <div class="sidebar-item">Drag me</div>
          <!-- constrained in code using GridStackWidget[] sidebarContent -->
          <div class="sidebar-item">2x1, max=3</div>
          <!-- DOM JSON spelling GridStackWidget. NOTE: require content:'xyz' to work and RenderCB() to render -->
          <div class="sidebar-item" data-gs-widget='{"w":3, "content":"drop w:3"}'>w:3</div>
          <!-- DOM id handled by myClone() case -->
          <div class="sidebar-item" gs-id="manual">gs-id case</div>
          <!-- DOM require proper GS format to be dropped as is without GridStackWidget above -->
          <div class="grid-stack-item" gs-w="3">
            <div class="grid-stack-item-content">DOM gs-w:3</div>
          </div>
          <div class="grid-stack-item" data-gs-widget='{"w":2}'>
            <div class="grid-stack-item-content">DOM w:2</div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="trash" id="trash">
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 20px">
      <div class="col-md-6">
        <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: true</a>
        <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
        <div class="grid-stack" id="left_grid"></div>
      </div>
      <div class="col-md-6">
        <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: false</a>
        <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
        <div class="grid-stack" id="right_grid"></div>
      </div>
    </div>
  </div>
  <script src="events.js"></script>
  <script type="text/javascript">
    let items = [
      {x: 0, y: 0, w: 2, h: 2},
      {x: 1, y: 1, h: 2}, // intentional overlap to test collision on load
      {x: 1, y: 1}, // intentional overlap to test collision on load
      {x: 3, y: 1},
      {x: 2, y: 3, w: 3, maxW: 3, content: 'has maxW=3'},
      {x: 2, y: 5}
    ];
    items.forEach((item, i) => item.content = item.content || String(i));

    // sidebar content (just 2, rest is other behavior) to create when we get dropped, instead of inserting the clone version
    let sidebarContent = [
      {content: 'dropped', id: 'dup_id'}, // test to make sure unique ids are created when dropped mutliple times...
      {content: 'max=3', w:2, h:1, maxW: 3},
    ];

    let options = {
      column: 6,
      minRow: 1, // don't collapse when empty
      cellHeight: 70,
      float: true,
      removable: '.trash', // true or drag-out delete class
      /** accepts everything fcn, not just .grid-stack-item (true case) but can also be: true | false | '.someClass' value */
      acceptWidgets: function(el) { return true },
      children: items,
      // itemClass: 'with-lines', // test a custom additional class #2110
    };
    let grids = GridStack.initAll(options);
    grids[1].float(false);

    // new v4 static method instead of setting up options on every grid (never been per grid really)
    // new v11 method takes GridStackWidget[] to specify what to create on drop
    // NOTE: helper:'clone' is default and typically used but have custom logic here to showcase
    // NOTE2: handle not set to drag entire self.
    GridStack.setupDragIn('.sidebar-item, .sidebar>.grid-stack-item', { helper: myClone }, sidebarContent);
    // GridStack.setupDragIn(); // second call will now work (cache last values)

    grids.forEach(function (grid, i) {
      addEvents(grid, i);
    });

    // clone the sidepanel item so we drag a copy, and in some case ('manual') create the final widget, else sidebarContent will be used.
    function myClone(el) {
      if (el.getAttribute('gs-id') === 'manual') {
        return grids[0].createWidgetDivs({w:2, content:'manual'}); // RenderCB() will be called
      }
      el = el.cloneNode(true);
      // el.setAttribute('gs-id', 'foo'); // help debug #2231
      // el.innerHTML = 'cloned'; // help debug
      return el;
    }

    function toggleFloat(button, i) {
      grids[i].float(! grids[i].getFloat());
      button.innerHTML = 'float: ' + grids[i].getFloat();
    }

    function compact(i) {
      grids[i].compact();
    }
  </script>
</body>
</html>
